<template>
  <div id="member_home">
    <h2 style="text-align: left">全体成员</h2>
    <div class="member_touxiang">
      <ul>
        <li v-for="(item,index) of memberList" :key="index">
          <div class="img_border">
            <img :src="item.userPortrait?item.userPortrait:'https://bucket-yufei.oss-cn-beijing.aliyuncs.com/my_self/image/head-girl.jpg'"/>
          </div>

          <h3>{{item.nickname}}</h3>
        </li>
      </ul>
    </div>
    <div class="member_home_echarts">
      <div  class="echar_main"></div>
      <div  class="echar_anhui"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import { adminAll } from "@/network/admin";
import anhuiMap from "./anhui";
export default {
  name: "memberHome",
  data(){
    return{
      memberList:[
      ],
    }
  },
  created() {
    adminAll().then((result)=>{

      console.log(result);
      this.memberList=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
  },
  mounted() {
    this.getMyCharts();
    this.getAnhuiCharts()
  },
  methods:{
    //设置Echarts饼状图的方法
    getMyCharts(){
      const myChart=echarts.init(document.querySelector(".echar_main"));

      myChart.setOption({
        title: {
          text: '成员家庭住址分布',
          left: 'center',
          top: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {

            type: 'pie',
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 3,
                name: '阜阳市'
              },
              {
                value: 1,
                name: '滁州市'
              },
              {
                value: 1,
                name: '蚌埠市'
              },
              {
                value: 1,
                name: '马鞍山市'
              }
            ],
            radius: ['40%', '70%']
          }
        ]
      });

    },

    getAnhuiCharts(){
      const myChartAnhuiMap=echarts.init(document.querySelector(".echar_anhui"));
      // axios.get('').then((result)=>{
      //   console.log(result);
      const result=anhuiMap();
        echarts.registerMap('USA', result,
            {
          Alaska: {
            // 把阿拉斯加移到美国主大陆左下方
            left: -131,
            top: 25,
            width: 15
          },
          Hawaii: {
            left: -110,
            top: 28,
            width: 5
          },
          'Puerto Rico': {
            // 波多黎各
            left: -76,
            top: 26,
            width: 2
          }
        });
        const option={
          title: {
            text: '组内成员分布图',
            left: 'left'
          },
          tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function(params) {
              const value = (params.value + '').split('.');
              const valueStr = value[0].replace(
                  /(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
                  '$1,'
              );
              return params.seriesName + '<br/>' + params.name + ': ' + valueStr;
            }
          },
          visualMap: {
            left: 'right',
            min: 1,
            max: 7,
            inRange: {
              color: [
                // '#313695',
                // '#4575b4',
                '#74add1',
                // '#abd9e9',
                // '#e0f3f8',
                // '#ffffbf',
                // '#fee090',
                // '#fdae61',
                // '#f46d43',
                '#d73027',
                '#a50026'
              ]
            },
            text: ['高', '低'],
            calculable: true
          },
          toolbox: {
            show: true,
            //orient: 'vertical',
            left: 'right',
            top: 'top',
            feature: {
              dataView: {
                readOnly: false
              },
              restore: {},
              saveAsImage: {}
            }
          },
          series: [{
            name: '成员所在人数',
            type: 'map',
            roam: true,
            map: 'USA',
            emphasis: {
              label: {
                show: true
              }
            },
            data: [{
              name: '滁州市',
              value: 1
            },
              {
                name: '蚌埠市',
                value: 1
              },
              {
                name: '阜阳市',
                value: 3
              },
              {
                name: '马鞍山市',
                value: 1
              }]
          }]
        }
        myChartAnhuiMap.setOption(option)


      // }).catch((reason)=>{
      //   console.log(reason);
      // })

    }
  },

}
</script>

<style scoped>
.member_home_echarts{
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap;
}

.echar_main , .echar_anhui{
  width: 400px;
  height: 400px;
  margin-top: 30px;
}

.member_touxiang{
  width: 100%;
  height: 200px;
  /*background: pink;*/
  margin: 20px auto;
  border-bottom: 1px solid #8c939d;
}
.member_touxiang ul{
  display: flex;
  justify-content: space-evenly;
}
.img_border{
  width: 160px;
  height: 160px;
  border-radius: 15px;
  overflow: hidden;
}

.member_touxiang ul img{
  width: 100%;
  height: 100%;
  transition: all 400ms;
}

.member_touxiang ul img:hover{
  transform: scale(1.2);
}
</style>
